<template>
  <div class="message-bubble">
    <div class="message-content" :class="bubbleStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageBubble',
  props: {
    isMine: {
      type: Boolean
    }
  },
  computed: {
    bubbleStyle() {
      let classString = '';
      if (this.isMine) {
        classString += 'message-send';
      } else {
        classString += 'message-received';
      }
      return classString;
    }
  }
}
</script>

<style scoped>
.message-bubble{
  position: relative;
}
.message-content{
  position: relative;
  padding: 10px;
  max-width: 350px;
  word-wrap: break-word;
  word-break: break-all;
  box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
}
.message-send{
  background-color:#5cadff;
  margin-right:15px;
  border-radius:4px 0 4px 4px;
  color:white;
}
.message-received{
  background-color: white;
  margin-left:15px;
  border-radius:0 4px 4px 4px;
}
</style>